<template>
    <vue-office-excel
        :src="excel"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import {useRouter} from "vue-router";
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

  const router = useRouter();
  let getFileUrlKey = router.currentRoute.value.params.fileUrlKey;
  const excel = ref(null);
  const loading = ref(null);

  const renderedHandler = () => {
    console.log('rendered');
    if(loading.value){
      loading.value.close();
    }
  };


  const errorHandler = (err) => {
      ElMessage.error('加载失败!');
      if (loading.value){
          loading.value.close();
      }
      console.log(err);
  };



onMounted(() => {
    if (getFileUrlKey !== '') {
        let fileUrlKey = getFileUrlKey.replaceAll("@", "/");
        fileUrlKey = `http://116.169.61.207:12008/gxsst/` + fileUrlKey;
        loading.value = ElLoading.service({
            lock: true,
            text: 'loading...',
            background: 'rgba(0, 0, 0, 0.7)'
        });
         setTimeout(() => {
              excel.value = fileUrlKey;
          }, 1000);
    }
});
</script>

<style scoped>

</style>
